<template>
	<view class="pageconfig">

		<view class="cu-card article">
			<view class="cu-item shadow">
				<!-- 地址信息 -->
				<view class="addressDiv" v-for="(item,index)  in addressList" v-if="item.id == defaultAddressId">
					<!--  姓名电话 -->
					<view class="flex  p-xs mb-sm">
						<view class="flex-sub  padding-sm margin-xs radius">{{item.fullName}} </view>
						<view class="flex-treble  padding-sm margin-xs radius"> {{item.phone}}</view>
					</view>
					<!--  地址 -->
					<view class="flex p-xs  mb-sm">
						<view class=" flex-treble padding-sm margin-xs radius">
							{{item.province}} {{item.city}} {{item.area}}
							{{item.specificAddress}}
						</view>
						<view class="flex-sub margin-xs radius"> <button class="cu-btn bg-orange sm" @tap="showModal"
								data-target="bottomModal">修改地址</button>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="cu-card article" style="margin-top: -5%;">
			<view class="cu-item shadow">
				<view class="content goodsDiv" v-for="(item,index) in priceCalculationData.specsPriceVos">
					<image class="goodsImage" :src="item.coverPic" mode="aspectFill">
					</image>
					<view class="desc">
						<!-- <view class="text-content"> 商品规格</view> -->
						<view class="text-cut goodsName"> {{item.name}}</view>
						<view class="text-cut"> {{item.specsName}}</view>
						<view class="text-cut">￥{{item.specsPrice}}
							* {{item.num}}
							= ￥{{item.totalPrice}}
						</view>
						<!-- <view>
							<view class="cu-tag bg-red light sm round">正品保障</view>
							<view class="cu-tag bg-red light sm round">包邮</view>
						</view> -->
					</view>
				</view>

				<!-- <view class="flex solid-bottom  justify-between">
					<view class=" padding-sm margin-xs radius">单价</view>
					<view class=" padding-sm margin-xs radius">￥{{priceCalculationData.specsPriceVos[0].specsPrice}}
					</view>
				</view>
				<view class="flex solid-bottom  justify-between" style="margin-top: -0%;">
					<view class=" padding-sm margin-xs radius">数量</view>
					<view class=" padding-sm margin-xs radius">{{priceCalculationData.specsPriceVos[0].num}}</view>
				</view> -->
				<view class="flex solid-bottom  justify-between" style="margin-top: 10%;">
					<view class=" padding-sm margin-xs radius">总价</view>
					<view class=" padding-sm margin-xs radius">
						<view class="cu-tag bg-red light sm round" style="font-size:1.2rem;">
							￥{{priceCalculationData.totalPrice}}
						</view>
					</view>
				</view>
			</view>

			<view class="cu-card " style="margin-top: -5%;">
				<view class="cu-item shadow">
					<view class="  commoncss5   ">
						<view style="" class="cu-form-group " style="background-color:unset;">
							<view class="title text-">备注</view>
							<input style="color:#777;" v-model="userRemark" class="" placeholder="选填,下单后商家可见" name="input"></input>
						</view>
					</view>

					<view class="flex solid-bottom  justify-end" style="margin-top: 0%;">
						<view class="padding-sm margin-xs radius"><button class="cu-btn bg-orange" @tap="createOrder">确认下单</button></view>
					</view>
				</view>
			</view>
		</view>

		<!-- 	<view class="cu-card article" style="margin-top: -5%;">
			<view class="cu-item shadow">

				 <view class="flex solid-bottom  justify-between">
					<view class=" padding-sm margin-xs radius">订单号</view>
					<view class=" padding-sm margin-xs radius">153151531531</view>
				</view>
				<view class="flex solid-bottom  justify-between" style="margin-top: -6%;">
					<view class=" padding-sm margin-xs radius">下单时间</view>
					<view class=" padding-sm margin-xs radius">2022-02-02</view>
				</view> 
			</view>
		</view> -->

		<!--  模拟支付确认  -->
		<!-- <view class="cu-bar bg-white margin-top">
			<view class="action">
				<text class="cuIcon-title text-orange "></text> 普通窗口
			</view>
			<view class="action">
				<button class="cu-btn bg-green shadow" @tap="payShowModal" data-target="Modal">Modal</button>
			</view>
		</view> -->
		<view class="cu-modal" :class="payModalName=='Modal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">确认支付</view>
					<view class="action" @tap="payHideModal">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl">
					<view class="cu-tag bg-red light sm round" style="font-size:1.2rem;">
						￥{{priceCalculationData.totalPrice}}
					</view>
					<view class="flex solid-bottom" style="align-items:center;justify-content:center">
						当前为模拟支付，点击按钮后订单为已支付状态，不会发起真正的支付，不点击则为已下单状态，不管确认支付还是取消都会跳转至订单列表
					</view>
					<view class="flex solid-bottom" style="align-items:center;justify-content:center">
						<view class="padding-sm margin-xs radius"><button class="cu-btn bg-orange" @tap="payOrder">确认支付</button></view>
					</view>
				</view>
			</view>
		</view>



		<!-- 底部窗口--选地址 -->
		<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white">
					<view class="action text-green"></view>
					<view class="action text-blue" @tap="hideModal">取消</view>
				</view>
				<view class="padding-xl">
					<radio-group class="block" @change="RadioChange">
						<view class="cu-form-group" v-for="(item,index)  in addressList">
							<!-- 地址信息 -->
							<view class="addressDiv">
								<!--  姓名电话 -->
								<view class="flex  p-xs mb-sm">
									<view class="flex-sub  padding-sm margin-xs radius" style="text-align: left;">
										{{item.fullName}}
									</view>
									<view class="flex-treble  padding-sm margin-xs radius" style="text-align: left;">
										{{item.phone}}
									</view>
								</view>
								<!--  地址 -->
								<view class="flex p-xs  mb-sm" style="margin-top: -7%;">
									<view class=" flex-treble padding-sm margin-xs radius" style="text-align: left;">
										{{item.province}} {{item.city}} {{item.area}}
										{{item.specificAddress}}
									</view>
								</view>
							</view>
							<radio :value="item.id" :checked="item.id==defaultAddressId"></radio>
						</view>
					</radio-group>
					<!-- <view style="margin-top: 5%;">
						<button style="margin-left: 80%;" class="cu-btn bg-orange" @tap="placeAnOrder">确认</button>
					</view> -->
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				uri: {
					addressPage: "/api/client/all/address/findPage?isDefault=1",
				},
				// 收货地址
				addressList: [],
				// 默认收货地址id
				defaultAddressId: null,
				// 价格计算
				priceCalculationData: {
					specsPriceVos: [{
						coverPic: ''
					}]
				},
				modalName: null,
				payModalName: null,
				userRemark: "",
				orderSpecses: [],
				// 订单交易号
				payNo: ""
			}
		},
		onLoad(option) {
			this.findAddress();
			// 价格计算
			this.orderSpecses = uni.getStorageSync('orderSpecses');
			this.priceCalculation(this.orderSpecses);
		},

		methods: {
			/**
			 * 查询默认收货地址
			 */
			findAddress() {
				this.crud.get(this.path, "/api/client/all/address/findPage").then(res => {
					if (res.data.data.records.length == 0) {
						// 没有地址
					}
					this.addressList = res.data.data.records;
					this.defaultAddressId = this.addressList[0].id;
				})
			},
			/**
			 * 价格计算
			 */
			priceCalculation(data) {
				this.crud.post(this.path, "/api/client/all/order/priceCalculation", data).then((res) => {
					if (res.data.code == 200) {
						this.priceCalculationData = res.data.data
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						})
					}
				})
			},

			/**
			 * 下单
			 */
			createOrder() {
				let data = {
					addressId: this.defaultAddressId,
					userRemark: this.userRemark,
					specses: this.orderSpecses
				}
				this.crud.post(this.path, "/api/client/all/order/createOrder", data).then((res) => {
					uni.showToast({
						title: "订单创建成功",
						icon: 'none'
					});
					this.payNo = res.data.data;
					// 弹出支付确认框 
					this.payShowModal();
				})
			},
			/**
			 * 订单支付
			 */
			payOrder() {
				this.crud.put(this.path, "/api/client/all/order/pay?payNo=" + this.payNo).then((res) => {
					uni.showToast({
						title: "支付成功",
						icon: 'none'
					});
					// 关闭弹层跳转至订单
					this.payHideModal();
				})
			},

			/**
			 * 弹出选择
			 */
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target;
				// 默认选周第一个规格
				//this.goodsSpecsId = this.goods.goodsSpecsList[0].id;
				//this.priceCalculation();
			},
			hideModal(e) {
				this.modalName = null
			},
			/**
			 * 地址单选切换
			 */
			RadioChange(e) {
				this.defaultAddressId = e.detail.value
				//this.priceCalculation();
				this.hideModal(e);
			},
			/**
			 * 弹出 支付确认
			 */
			payShowModal() {
				this.payModalName = "Modal";
			},
			payHideModal() {
				console.log("--关闭支付弹层")
				this.payModalName = null;
				// 跳转至订单
				// uni.switchTab({
				// 	url: '/pages/fpage3/index'
				// });
				// 跳转至订单列表
				uni.reLaunch({
					url: '/pages/fpage3/index',
					success: function(e) {
						var page = getCurrentPages().pop();
						if (page == undefined || page == null) return;
						page.onLoad();
					}
				});
			}
		}
	}
</script>

<style>
	.goodsDiv {
		margin-top: 5%;
	}


	/**本页全局配置的代码**/
	.pageconfig {
		margin-top: 8%;
		width: 100%;
		height: 100vh;
		overflow: hidden;
		overflow-y: scroll;
	}


	/**本页单行文本5的css代码**/
	.commoncss5 {
		font-size: 26rpx;
		background-color: #ffffff !important;
	}
	
	.goodsName {
		width: 400rpx !important;
		text-align: left;
		margin-top: 0%;
		margin-left: 0%;
		/* 超出范围的显示... */
		overflow: hidden;
		/*隐藏*/
		white-space: nowrap;
		/*不换行*/
		text-overflow: ellipsis;
		/* 超出部分省略号 */
	}
</style>
